<template>
	<view class="container-imgs-bed">
		<view class="img-item-box" :class="'imgs-leng-'+(imgs.length)" v-for="(item,index) in imgs" :key="index">
			<image :src="item" mode="aspectFill" @click.stop="handlePreview(item)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imgs: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handlePreview(item) {
				uni.previewImage({
					current: item,
					urls: this.imgs
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-imgs-bed {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.img-item-box {
			border-radius: 20upx;
			overflow: hidden;
			background-color: #f9f9f9;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.imgs-leng-1 {
			width: 244upx;
			height: 244upx;
		}

		.imgs-leng-2 {
			width: 220upx;
			height: 220upx;
			margin: 0 14upx 14upx 0;
		}

		.imgs-leng-3,
		.imgs-leng-4,
		.imgs-leng-5,
		.imgs-leng-6,
		.imgs-leng-7,
		.imgs-leng-8,
		.imgs-leng-9 {
			width: 180upx;
			height: 180upx;
			margin: 0 14upx 14upx 0;
		}
	}
</style>